<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <div class="login-title">中共郑州市公安局交通巡逻警察支队委员会</div>
      <div class="login-content">
	      <div class="title-container">
	        <h3 class="title">智慧党建平台</h3>
	      </div>
	      <el-form-item prop="username">
	        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名"/>
	      </el-form-item>	
	      <el-form-item prop="password">
	        <el-input name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on"
	          placeholder="请输入密码" />
	      </el-form-item>	
				<el-form-item prop="captcha">
					<el-row>
						<el-col :span="14">
							<el-input id="checkCode" name="captcha" type="text" v-model="loginForm.captcha"
							  placeholder="请输入验证码" />
						</el-col>
						<el-col :span="10">
							<div class="captcha">
								<img :src="captchaPath" @click="getCaptchaPath()">
							</div>
							<!-- <el-input type="text" v-model="loginForm.code" class="captcha" @click="getCaptchaPath()"/> -->
						</el-col>
					</el-row>
				  
				</el-form-item>	
	      <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登 录</el-button>	   		
      </div>
    </el-form>
  </div>
</template>

<script>
import { isvalidUsername } from '@/utils/validate'

export default {
  name: 'login',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
		const validateCaptcha = (rule, value, callback) => {
      if (value != loginForm.code) {
        callback(new Error('验证码不正确'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'test',
        password: '123456',
				captcha:'',
				code:'',
      },
			uuid:'',
			captchaPath:'',
      loginRules: {
        username: [{ required: true,message: '用户名不能为空',  trigger: 'blur'}],
        password: [{ required: true,message: '密码不能为空', trigger: 'blur', validator: validatePassword }],
				captcha: [{ required: true,message: '验证码不能为空', trigger: 'blur'}]
      },
      passwordType: 'password',
      loading: false
    }
  },
	mounted() {
		this.imgUrls(0.1)
	},
  methods: {
		//获取验证码
		getCaptchaPath () {
			var num = Math.random();
			this.imgUrls(num)
			this.uuid = this.getUUID()
// 			let url = this.adornUrl(`web/captcha.jpg?uuid=${this.uuid}`)
// 			this.$axios.get(url).then(res => {
// 				console.log(res)
// 				this.captchaPath = res.data
// 			})
		},
		getUUID () {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
				return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
			})
		},
		adornUrl(actionName){
			return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/xbkj-dj' : '') + actionName
		},
		imgUrls(num){
          this.captchaPath = "http://farming.wowocode.com:8081/captcha/new?height=40&width=160&font_size=20?"+num
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
					this.$axios.post(`web/login`,{
						"username":this.loginForm.username,
						"password":this.loginForm.password,
						"captcha":this.loginForm.captcha,
						'uuid': this.uuid
					}).then(res => {
							if(res.data && res.data.code === 0){
								// 0未登录，1已登录
								sessionStorage.setItem('userName', this.loginForm.username)
								localStorage.setItem('ticket', res.data.token)
								this.$router.push({ path:'/index'})
							}else {
								this.getCaptchaPath();
								this.$message.error(res.data.msg)
							}	
					}).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped="scoped"> 	
.el-button--primary {
  color: #fff;
  background-color: #cf0000;
  border-color: #cf0000;
}
.el-button--primary:hover {
  color: #fff;
  background-color: #f10000;
  border-color: #f10000;
}

.login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #fbf1ea url("../assets/img/login_bg.jpg") no-repeat center bottom;
	}
.login-container .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 550px;
    padding: 15px;
    margin: 40px auto;
}
.login-title {
  color: #cf0000;
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: bold;
}
.login-content {
  background: #fff;
  padding: 25px;
}
.login-container .title-container {
    position: relative;
}
.login-container .title-container .title {
      font-size: 18px;
      color: #000;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
}
.captcha{
	height: 40px;
	 margin-left: 20px;
	 /* background: #ccc; */
}
</style>
